<template>
  <pro-layout
    :menus="menus"
    :collapsed="collapsed"
    :mediaQuery="query"
    :isMobile="isMobile"
    :handleMediaQuery="handleMediaQuery"
    :handleCollapse="handleCollapse"
    :i18nRender="i18nRender"
    v-bind="settings"
  >
    <!-- 1.0.0+ 版本 pro-layout 提供 API，
          我们推荐使用这种方式进行 LOGO 和 title 自定义
    -->
    <template v-slot:menuHeaderRender>
      <div class="tophearder">
        <div class="top_bg">
          <div class="top_bg2"></div>
          <div class="top_bg3"></div>
        </div>
        <div class="tabarbox">
          <h1 style="font-size:28px;margin:0">{{ title }}</h1>
          <div class="userinfobar">
            <a-avatar :size="collapsed === true ? 64 : 90" icon="user" :src="users.img"/>
            <div class="usernamebar">
              <div class="t1">{{ users.user }}</div>
              <div class="t2">{{ users.level_name }}</div>
            </div>
          </div>
        </div>
      </div>
    </template>

    <setting-drawer :settings="settings" @change="handleSettingChange"/>
    <template v-slot:rightContentRender>
      <div style="display:flex;align-items:center;width100%;flex:1;">
        <a-icon type="redo" style="font-size:20px;transform:rotate(280deg);cursor: pointer;" @click="doRefresh"/>
        <page-header-wrapper :title="false" content="" style=""></page-header-wrapper>
        <div style="float:right;margin-left: auto;">

          <a-popover placement="bottomRight" trigger="click">
            <template slot="content">
              <div style="height:285px;overflow-y: auto">
                <div v-for="(v,k) in messagelist" :key="k">
                  <div class="flex messageli cursor" style="width:204px;padding-bottom:10px;" @click="open(v)">
                    <img :src="v.pic" alt="" style="width:52px;height: 38px;border-radius: 6px;margin-right: 6px;">
                    <div>
                      <div>{{ v.title }}</div>
                      <div>{{ moment(v.time).startOf('day').fromNow() }}</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="limore">查看更多</div>
            </template>
            <a-badge :count="unread" :offset="[-15,0]">
              <a-icon
                type="bell"
                style="font-size:20px;cursor: pointer;margin-right: 20px;"
                @click.once="getadminmessage"/>
            </a-badge>
          </a-popover>
          <a-icon
            type="logout"
            style="margin-right:8px;font-size:20px;cursor: pointer;"
            @click="dologinout"
          />
        </div>
        <!-- <right-content :top-menu="settings.layout === 'topmenu'" :is-mobile="isMobile" :theme="settings.theme" /> -->
        <a-modal
          v-model="visible"
          :width="510"
          :mask="false"
          :footer="null"
          wrapClassName="messagebox"
          :centered="true">
          <a :href="gourl" target="_blank">
            <img :src="messageimg" alt="" style="width:510px;height:264px;cursor: pointer;border-radius: 10px;">
          </a>
        </a-modal>
      </div>
    </template>
    <template v-slot:footerRender>
      <global-footer/>
    </template>
    <router-view/>
    <el-backtop target=".ant-layout .sidemenu" class="elbacktop" :visibility-height="150" :bottom="160" :right="150">
      <div class="waibox">
        <div class="roket"></div>
      </div>
    </el-backtop>
  </pro-layout>
</template>

<script>
  import moment from 'moment'
  import storage from 'store'
  import { getadminmessage, getunreadnum } from '@/api/messageApi'
  import { SettingDrawer, updateTheme } from '@ant-design-vue/pro-layout'
  import { i18nRender } from '@/locales'
  import { mapState } from 'vuex'
  // import { CONTENT_WIDTH_TYPE, SIDEBAR_TYPE, TOGGLE_MOBILE_TYPE } from '@/store/mutation-types'// del permiss 开
  import { Modal } from 'ant-design-vue'

  import defaultSettings from '@/config/defaultSettings'
  import RightContent from '@/components/GlobalHeader/RightContent'
  import GlobalFooter from '@/components/GlobalFooter'
  import LogoSvg from '../assets/logo.svg?inline'
  // import { asyncRouterMap } from '@/config/router.config.js' // del permiss 闭
  import { CONTENT_WIDTH_TYPE } from '@/store/mutation-types' // del permiss 闭

  export default {
    name: 'BasicLayout',
    components: {
      SettingDrawer,
      RightContent,
      GlobalFooter,
      LogoSvg
    },
    data () {
      return {
        moment,
        unread: 0,
        visible: false,
        messageimg: '',
        gourl: '',
        messagelist: [
          {
            id: 10, // 自增id
            time: '2020-12-22 14:25:26', // 发布时间
            user: '从雪艳', // 发布用户
            title: '测试', // 标题
            pic: 'https://detail.tmall.com/item.htm?id=608455384750', // 图片
            redirect_url: 'https://detail.tmall.com/item.htm?id=608455384750', // 跳转地址
            unread_num: 1533, // 未读数量
            read_num: 1533 // 已读数量
          }
        ],
        // preview.pro.antdv.com only use.
        isProPreviewSite: process.env.VUE_APP_PREVIEW === 'true' && process.env.NODE_ENV !== 'development',
        // end

        // base
        menus: [],
        // 侧栏收起状态
        collapsed: false,
        title: defaultSettings.title,
        settings: {
          // 布局类型
          layout: defaultSettings.layout, // 'sidemenu', 'topmenu'
          // CONTENT_WIDTH_TYPE
          contentWidth: defaultSettings.layout === 'sidemenu' ? CONTENT_WIDTH_TYPE.Fluid : defaultSettings.contentWidth,
          // 主题 'dark' | 'light'
          theme: defaultSettings.navTheme,
          // 主色调
          primaryColor: defaultSettings.primaryColor,
          fixedHeader: defaultSettings.fixedHeader,
          fixSiderbar: defaultSettings.fixSiderbar,
          colorWeak: defaultSettings.colorWeak,

          hideHintAlert: false,
          hideCopyButton: false
        },
        // 媒体查询
        query: {},

        // 是否手机模式
        isMobile: false,
        users: {}
      }
    },
    computed: {
      ...mapState({
        // 动态主路由
        mainMenu: state => state.permission.addRouters
      })
    },
    // created () {
    //   const routes = this.mainMenu.find(item => item.path === '/')
    //   this.menus = (routes && routes.children) || []
    //   // 处理侧栏收起状态
    //   this.$watch('collapsed', () => {
    //     this.$store.commit(SIDEBAR_TYPE, this.collapsed)
    //   })
    //   this.$watch('isMobile', () => {
    //     this.$store.commit(TOGGLE_MOBILE_TYPE, this.isMobile)
    //   })
    // },  // del permiss 开
    created () {
      // this.getadminmessage()
      this.getunreadnum()
      console.log('个人信息', storage.get('userinfo'))
      if (storage.get('userinfo')) {
        this.users = storage.get('userinfo')
        this.title = this.users.bra_name
      }
      // const routes = asyncRouterMap.find(item => item.path === '/')
      // console.log('this.mainMenu', this.mainMenu)
      const routes = this.mainMenu.find((item) => item.path === '/')
      this.menus = (routes && routes.children) || []
    }, // del permiss 闭
    mounted () {
      const userAgent = navigator.userAgent
      if (userAgent.indexOf('Edge') > -1) {
        this.$nextTick(() => {
          this.collapsed = !this.collapsed
          setTimeout(() => {
            this.collapsed = !this.collapsed
          }, 16)
        })
      }

      // first update color
      // TIPS: THEME COLOR HANDLER!! PLEASE CHECK THAT!!
      if (process.env.NODE_ENV !== 'production' || process.env.VUE_APP_PREVIEW === 'true') {
        updateTheme(this.settings.primaryColor)
      }
    },
    methods: {
      i18nRender,
      open (row) {
        console.log(row)
        this.messageimg = row.pic
        this.gourl = row.redirect_url
        this.visible = true
      },
      handleOk (e) {
        console.log(e)
        this.visible = false
      },
      getadminmessage () {
        getadminmessage().then(res => {
          console.log(res)
          this.messagelist = res.data.data
        }).catch(err => {
          console.log(err)
        })
      },
      getunreadnum () {
        getunreadnum().then(res => {
          console.log(res)
          this.unread = parseInt(res.data.num)
        }).catch(err => {
          console.log(err)
        })
      },
      dologinout () {
        Modal.confirm({
          title: '提示',
          content: '您真的要退出吗?',
          onOk: () => {
            return this.$store.dispatch('Logout').then(() => {
              this.$router.push({ name: 'login' })
            })
          },
          onCancel () {
          }
        })
      },
      doRefresh () {
        this.$router.go(0)
        // location.reload();
      },
      handleMediaQuery (val) {
        this.query = val
        if (this.isMobile && !val['screen-xs']) {
          this.isMobile = false
          return
        }
        if (!this.isMobile && val['screen-xs']) {
          this.isMobile = true
          this.collapsed = false
          this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
          // this.settings.fixSiderbar = false
        }
      },
      handleCollapse (val) {
        this.collapsed = val
      },
      handleSettingChange ({ type, value }) {
        console.log('type', type, value)
        type && (this.settings[type] = value)
        switch (type) {
          case 'contentWidth':
            this.settings[type] = value
            break
          case 'layout':
            if (value === 'sidemenu') {
              this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fluid
            } else {
              this.settings.fixSiderbar = false
              this.settings.contentWidth = CONTENT_WIDTH_TYPE.Fixed
            }
            break
        }
      }
    }
  }
</script>

<style lang="less">
  @import './BasicLayout.less';

  .ant-pro-global-header {
    display: flex;
    justify-content: flex-start;
  }

  .ant-pro-sider-menu-logo {
    height: auto;
    padding-left: 0px;
    background-color: #363636 !important;

    .top_bg2 {
      width: 100%;
      height: 100px;
      background-color: #292929;
    }
  }

  .tophearder {
    height: 304px;
    position: relative;

    .top_bg {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;

      .top_bg2 {
        width: 100%;
        height: 120px;
        background-color: #292929;
      }

      .top_bg3 {
        width: 100%;
        height: 47px;
        background-color: #292929;
        border-radius: 0 0 100% 100%;
      }
    }
  }

  .tabarbox {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 22;

    // background-color: #313030;
    h1 {
      width: 100%;
      text-align: center;
    }

    .userinfobar {
      width: 100%;
      text-align: center;
      margin-top: 57px;
      margin-bottom: 39px;

      .usernamebar {
        width: 100%;
        color: white;

        .t1 {
          font-size: 14px;
          font-family: '方正兰亭黑-标准';
          line-height: 30px;
        }

        .t2 {
          color: #babdc1;
          font-size: 18px;
          line-height: 30px;
        }
      }
    }
  }

  .ant-layout-sider-collapsed {
    .tophearder {
      height: 67px;

      .tabarbox {
        h1 {
          display: none;
        }

        .userinfobar {
          width: 100%;
          text-align: center;
          margin: 0;

          .usernamebar {
            display: none;
          }
        }
      }
    }
  }

  .messageli {
    border-bottom: 1px solid #E8E9EA;
    padding-top: 7px;
  }

  .limore {
    height: 30px;
    line-height: 40px;
    color: #101010;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    border-top: 1px solid #E8E9EA;
  }

  .messagebox {
    border-radius: 10px;
    overflow: hidden;

    .ant-modal-body {
      padding: 0;
    }
  }

  .elbacktop {
    border-radius: 8px !important;
    border: 1px solid #E8E9EA;
  }

  .elbacktop:hover {
    border: 1px solid #2396F9;
  }

  .waibox {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .roket {
    height: 31px;
    width: 31px;
    background: url("~@/assets/imgs/roket.png") no-repeat;
    background-size: 100% 100%;
    background-position: 50% 50%;
  }

  .roket:hover {
    background: url("~@/assets/imgs/roket2.png") no-repeat;
    background-size: 100% 100%;
  }

  /*/deep/.el-backtop{*/
  /*  width: 48px;*/
  /*  height: 48px;*/
  /*}*/
</style>
